<template>
	<view class="home" :style="bgStyle">
		<custom-navbar title="活动列表" :show-back="true" @back="handleBack" />

		<view class="content p30 pb150 mt30" :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="fc w100 mb40">
				<view v-for="(item,index) in data17" :key="index">
					<view class="tab fcc f265c6 mr20" :class="name == item.value ? 'tabactive' :''"
						@click="Switchingproduct_category(item.value)">
						{{item.label}}
					</view>
				</view>
			</view>
			<view class="w100">
				<view v-for="(item,index) in activityData" :key="index" class="w100 mb20">
					<view class="cover">
						<image class="img" :src="item.activity_cover"></image>
						<view class="top fcc">
							<image class="rentout" src="/static/images/home/仅出租.svg"></image>
							<view v-if="item.activity_status_text == '待开始'" class="text f22bc99A2E"
								style="color: #FF0C10;">
								待开始
							</view>
							<view v-if="item.activity_status_text == '进行中'" class="text f22bc99A2E"
								style="color: #398DFB;">
								进行中
							</view>
							<view v-if="item.activity_status_text == '已完成'" class="text f22bc99A2E"
								style="color: #999999;">
								已完成
							</view>
						</view>
					</view>
					<view class="bttoom p30">
						<view class="f30bc0 mb20">{{item.activity_title}}</view>
						<view class="f245c3">活动时间：{{item.activity_start_time}}-{{item.activity_end_time}}</view>
						<up-line margin='30rpx 0 30rpx 0'></up-line>
						<view class="fcsb">
							<view class="f245c9">
								活动地点：{{item.province_id_text}}{{item.city_id_text}}{{item.district_id_text}}
							</view>
							<view v-if="item.is_use == 0" @click="handleapply(item.activity_id)" class="btn f20bcf fcc">
								<view>参与活动</view>
							</view>
							<view v-else class="btn f20bcf fcc">
								<view>已参加</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		getCurrentInstance
	} from 'vue'
	import {
		useUserStore
	} from '@/stores/user'
	import {
		useI18n
	} from 'vue-i18n'
	import {
		ActivityList
	} from '@/api/activity'
	import {
		getClassification
	} from '@/api/login'
	import CustomNavbar from '@/components/custom-navbar.vue'
	// 获取全局cdn方法
	const {
		proxy
	} = getCurrentInstance()
	const cdn = (path) => proxy.$cdn + path
	const {
		t
	} = useI18n()
	const userStore = useUserStore()
	const searchKey = ref('')

	// 登录状态：'loading'|'success'|'error'
	const loginStatus = ref('loading')

	// 获取系统信息
	const systemInfo = uni.getSystemInfoSync()
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)
	// 背景样式
	const bgStyle = ref({
		backgroundImage: 'url(https://gx.jifgou.com/image/homebg.png)',
		backgroundSize: '100% auto',
		backgroundRepeat: 'no-repeat',
		minHeight: '100vh'
	})
	const data17 = ref([]) // 保持ref声明
	const loading = ref(false)
	const name = ref('')
	const fetchData = async () => {
		try {
			loading.value = true

			// 使用不同变量名接收响应
			const classificationRes = await getClassification(17)
			if (classificationRes.code === 200) {
				data17.value = classificationRes.data
				name.value = data17.value[0].value
			} else {
				throw new Error(classificationRes.message || '获取分类失败')
			}

			// 等待活动列表获取
			await getActivityList()

		} catch (error) {
			console.error('请求失败:', error)
			uni.showToast({
				title: error.message || '加载失败',
				icon: 'none'
			})
			// 可以在这里决定是否要继续执行其他逻辑
		} finally {
			loading.value = false
		}
	}

	// 初始化
	onMounted(() => {

		fetchData()
	})

	const activityData = ref([])
	const getActivityList = async () => {
		try {
			const Res = await ActivityList(
				'zh', // lang_code
			)

			if (Res.code = 200) {
				activityData.value = Res.data.data
			}
			console.log(Res)
		} catch (error) {
			console.error('获取活动列表失败:', error)
		}
	};
	// 分类 
	const Switchingproduct_category = (val) => {
		name.value = val
		getActivityList()
	}
	const handleBack = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	};
	const handleapply = (activity_id) => {
		uni.navigateTo({
			url: `/pages/activity/apply?id=${activity_id}` // 假设item对象中有id字段
		});
	};
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		position: relative;

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 44px);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.tab {
				width: 170rpx;
				height: 66rpx;
				background: #FFFFFF;
				border-radius: 500rpx 500rpx 500rpx 500rpx;
			}

			.tabactive {
				width: 170rpx;
				height: 66rpx;
				background: linear-gradient(90deg, #398DFB 0%, #61DBFF 100%);
				border-radius: 500rpx 500rpx 500rpx 500rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.cover {
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				height: 320rpx;
				width: 100%;
				position: relative;

				.img {
					border-radius: 20rpx 20rpx 0rpx 0rpx;
					width: 100%;
					height: 320rpx;
				}

				.top {
					position: absolute;
					right: 30rpx;
					top: 0;
					width: 100rpx;

					.rentout {
						width: 100rpx;
						height: 94rpx;
					}

					.text {
						position: absolute;
						top: 44rpx;
					}
				}
			}

			.bttoom {
				height: 246rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 20rpx 20rpx;

				.btn {
					width: 150rpx;
					height: 50rpx;
					background: linear-gradient(90deg, #398DFB 0%, #61DBFF 100%);
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}
			}



		}
	}
</style>